<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
        href="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/pro/css/buy/cart2.382798e6.css">
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/vue.js"></script>
    <style>
        .article {
            padding: 5px;
        }

        .article-title {
            text-align: center;
            font-weight: bolder;
        }

        .article-content {
            text-indent: 2em;
        }

        .article-footer {
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="app">
        <lw-article>
            <!-- slot="title"  老版本(新版已经废弃) -->
            <!-- v-slot:title  新版本 -->
            <template #title>
                Vue
            </template>

            <template #default>
                Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue
                的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
            </template>
            <template #footer>
                作者:尤雨溪
            </template>
        </lw-article>
        <lw-article>
            <template #default>
                Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue
                的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
            </template>
        </lw-article>

    </div>


    <!-- <div class="article" :style="{color:color}">
        <div class="article-title">
            Vue
        </div>
        <div class="article-content">
            Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue
            的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
        </div>
        <div class="article-footer">
            作者:尤雨溪
        </div>
    </div> -->

</body>
<script>
    // 插槽:  Vue 实现了一套内容分发的 API

    // 如何使用插槽 ? 父组件传, 子组件收
    // 1. 父组件传 => 父组件在使用子组件时, 在子组件的标签对内传入文本或html结构
    // 2. 子组件收 => 子组件使用 <slot></slot> 标签, 作为内容分发的出口 => 将内容输出到指定位置

    // 可以理解为 <slot></slot>  标签就是一个占位符, 当子组件渲染时, slot标签会被替换为传入的内容

    // 小技巧: 子组件中有$slots对象,用于存储父组件中传入的插槽内容

    // 命名插槽   父组件对应插槽名称传, 子组件对应插槽名称收
    // 1. 给<slot></slot> 标签添加name属性作为插槽名称,如果不设置name属性,默认name='default'
    // 2. 父组件传入插槽内容时,可以对应插槽名称传入 -> 替换对应name的<slot></slot> 标签,

    // slot="title"  老版本(新版已经废弃) 
    // v-slot:title  新版本 

    // 简写   v-slot:参数  简写为 #参数

    Vue.component("lw-color-select", {
        data() {
            return {
                color: "#000000"
            }
        },
        template: ` <div class="color-select" >
            <input type="color" :value="color">
        </div>`,
    })
    Vue.component("lw-article", {
        data() {
            return {
                color: "#000000"
            }
        },
        template: `<div class="article" :style="{color:color}">
            <div class="article-title" v-if="$slots.title">
                <slot name="title"></slot>
            </div>
            <div class="article-content">
                <slot></slot>
            </div>
            <div class="article-footer" v-if="$slots.footer">
                <slot name="footer"></slot>
            </div>
        </div>`,
        mounted() {
            console.log("组件实例", this);
        },
    })

    var app = new Vue({
        el: "#app",
        data: {
            // input[type="color"]  不能简写
            color: "#000000",
        }
    })

</script>

</html>